<template>
  <div id="uerDangerIndex">
    <!--上部搜索条件组件-->
    <topSearch :form-inline="formInline" @toSearch="toSearch"></topSearch>
    <div class="table-conBtn">
      <el-button
        v-permission="'wh:system:userSensitiveWords:add'"
        type="success"
        class="el-icon-plus"
        @click="addBtn"
      >
        新增
      </el-button>
      <el-button
        v-permission="'wh:system:userSensitiveWords:import'"
        type="warning"
        class="el-icon-upload2"
        @click="importBtn"
      >
        导入
      </el-button>
      <el-button
        v-permission="'wh:system:userSensitiveWords:remove'"
        type="warning"
        plain
        @click="delAll()"
      >
        批量删除
      </el-button>
      <freshCom @searchList="searchList"></freshCom>
    </div>
    <!--下部table-->
    <el-table
      v-loading="loading"
      :data="tableData"
      stripe
      style="width: 100%"
      @selection-change="handleSelectionChange"
      max-height="490"
      ref="table"
    >
      <el-table-column
        type="selection"
        width="55"
        align="center"
      ></el-table-column>
      <el-table-column type="index" width="60" align="center" label="序号">
        <template slot-scope="scope">
          {{
            scope.$index
              | filterPage(searchParams.pageNum, searchParams.pageSize)
          }}
        </template>
      </el-table-column>
      <el-table-column
        label="风险词"
        prop="word"
        min-width="130"
      ></el-table-column>
      <el-table-column
        label="使用频次"
        prop="frequency"
        show-overflow-tooltip
        min-width="120"
      ></el-table-column>
      <el-table-column label="创建者" prop="content" min-width="200">
        <template slot-scope="scope">
          {{ scope.row.user.name }}
        </template>
      </el-table-column>
      <el-table-column
        label="创建时间"
        show-overflow-tooltip
        prop="createdDate"
        min-width="150"
      ></el-table-column>
      <el-table-column fixed="right" label="操作" width="90">
        <template slot-scope="scope">
          <el-button
            v-permission="'wh:system:userSensitiveWords:remove'"
            type="text"
            @click="delSingle(scope.row.id)"
          >
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--分页-全局组件-->
    <pageCom
      :searchParams="searchParams"
      :total="total"
      @searchList="searchList"
    ></pageCom>
    <dialogAdd
      v-if="addDialogData.isShow"
      :dialog-data="addDialogData"
      @refresh="refresh"
    ></dialogAdd>
    <importDialog
      v-if="importDialogData.isShow"
      :dialog-data="importDialogData"
      @showError="showError"
      @refresh="refresh"
    ></importDialog>
    <!-- 导入失败弹窗 -->
    <errorDialog
      v-if="errorDialogData.isShow"
      :dialog-data="errorDialogData"
      from="userDangerWords"
    ></errorDialog>
  </div>
</template>

<script>
import {
  getSearchList,
  batchRemove,
  deleteReq,
  importUrl,
  downUrl
} from '@/api/dangerWords/userDangerWords' // 接口
import topSearch from '@component/dangerWords/userDangerWords/topSearch' // 上部搜索条件
import dialogAdd from '@component/dangerWords/userDangerWords/dialogAdd' // 新增弹窗
import importDialog from '@common/importDialog' // 导入弹窗
import errorDialog from '@common/errorDialog' // 导入失败弹窗
import { saveScrollMixins } from '@/mixins/saveScroll'
export default {
  name: 'checkName',
  msg: '用户名严禁词',
  mixins: [saveScrollMixins],
  components: {
    topSearch,
    dialogAdd,
    importDialog,
    errorDialog
  },
  data() {
    return {
      loading: true,
      total: 0,
      tableData: [], // table内容
      searchParams: {
        pageNum: 1, // 当前页数
        pageSize: 10, // 页面显示条数
        orderByColumn: '', // 排序字段
        isAsc: 'asc' // 正序倒序
      },
      formInline: {
        // 搜索条件
        searchText: '', // 查询创建时间
        startTime: '', // 开始时间
        endTime: '', // 结束时间
        createTime: []
      },
      addDialogData: {
        isShow: false, // 控制弹框显示
        params: '' // 参数
      },
      // 传递给导入弹框的数据
      importDialogData: {
        title: '创建用户昵称/账号严禁词',
        isShow: false, // 控制弹框显示
        params: '' // 参数
      },
      // 导入失败弹框的数据
      errorDialogData: {
        isShow: false, // 控制弹框显示
        warningText: '' // 参数
      },
      multipleSelection: []
    }
  },
  activated() {
    this.toTableScrollHeight()
  },
  mounted() {
    // 获取权限
    this.searchList()
    this.$nextTick(() => {
      setTimeout(() => {
        this.setTableScrollHeight()
      }, 1000)
    })
  },
  methods: {
    /* 获取列表 */
    searchList() {
      this.loading = true
      let obj = Object.assign({}, this.searchParams, this.formInline)
      delete obj.createTime
      getSearchList(
        obj,
        (response) => {
          this.loading = false
          this.tableData = response.rows
          this.total = response.total
        },
        (response) => {
          this.loading = false
          this.$message({
            message: response.message,
            type: 'warning'
          })
        }
      )
    },
    /* table选择 */
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    /* 换页 */
    changePage(page) {
      this.searchParams.pageNum = page
      this.searchList()
    },
    // 新增
    addBtn() {
      this.addDialogData.isShow = true // 显示新增弹框
    },
    // 导入
    importBtn() {
      this.importDialogData.url = importUrl() // 导入接口
      this.importDialogData.downUrl = downUrl() // 下载模板接口
      this.importDialogData.isShow = true // 显示导入弹框
    },
    /* 导入失败弹窗 */
    showError(text) {
      this.errorDialogData.isShow = true // 显示导入失败弹框
      this.errorDialogData.warningText = text // 显示导入失败弹框
    },
    /* 批量删除 */
    delAll() {
      let n = this.multipleSelection.length
      if (n <= 0) {
        this.$message.warning('请至少选择一条数据！')
        return
      }
      this.$confirm(`确认删除这${n}条数据吗？`, '删除提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let ids = []
        this.multipleSelection.forEach((item) => {
          ids.push(item.id)
        })
        let obj = { ids }
        // let params = this.changeToForm(obj)
        batchRemove(obj, (response) => {
          this.searchList()
        })
      })
    },
    /* 单个删除按钮 */
    delSingle(id) {
      this.$confirm('确定删除该条严禁词信息吗？', '删除提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let obj = { id }
        deleteReq(id, obj, (response) => {
          this.searchList()
        })
      })
    },
    /* 新增编辑后，刷新列表 */
    refresh() {
      this.toSearch()
    },
    /* 搜索 */
    toSearch() {
      this.searchParams.pageNum = 1
      this.searchList()
    }
  }
}
</script>

<style lang="less">
// #uerDangerIndex {
// }
</style>
